<template>
  <view>
    <!-- 使用自定义的搜索组件 -->
	<view class="search-release">
		<!-- <my-search :bgcolor="'pink'" :radius="3"></my-search> -->
		<view class="search">
			<my-search  :radius="10" @click="gotoSearch"></my-search>
		</view>
		<view class="release" @click="gotoRelease">
			<uni-icons type="compose" size="25" color="#55aaff" ></uni-icons>发布宝贝
		</view>
	</view>


    <view class="scroll-view-container">
      <!-- 上面的滑动区域，放分类 -->
     <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
     	<view class="scroll-view-item_H"  v-for="(item,i) in classificationList" :key="i">
     		<navigator class="scroll-nav" :url="'/subpkg/goods_list/goods_list?id=' +item.id">
					<view class="img-view">
						<image  class="scroll-image"  :src="item.associationImg" ></image>
					</view>
					<text class="cal-text"> {{item.name}}</text>
     			
     		</navigator>
     	</view>
     </scroll-view>
    </view>
	<view class="content">
		<view class="goods-new">
			<view class="goods-text">
				最近上新
			</view>
			<view class="goods-more">
				查看更多
				<uni-icons type="right" size="15"></uni-icons>
			</view>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="(item, i) in goodsList" :key="i" >
				<navigator class="goods-nav-item" :url="'/subpkg/goods_detail/goods_detail?flag=1&&id=' +item.id ">
					<view class="goods-img-left"  >
						<view >
							<image  class="goods-image"  :src="item.exp1" ></image>
						</view>
						<view class="name_price">
							<view class="name_price_left">
								<view class="name">
									{{item.productName}}
								</view>
								<view class="price">
									{{item.productPrice}}
								</view>
							</view>
							<view class="name_price_right">
								<uni-icons type="right" size="15"></uni-icons>
							</view>
						</view>
						
					</view>
					
				</navigator>
					
			</view>
			
		</view>
	</view>
	
  </view>
</template>

<script>
  import { mapMutations,mapState } from 'vuex'
  export default {
    data() {
      return {
		  //上面分类的内容
        classificationList: [],
		//最近上新的内容
		goodsList: [],
		
		// 列表的页码
		queryFollowObj: {
			// 页码值
			pageNo: 1,
			// 每页显示多少条数据
			pageSize: 6
		},
		// 是否正在请求数据
		isloading: false,
		//商品数量
		total: 0,
		classColor: 'grey',
      };
    },
	computed: {
	  ...mapState('m_user', ['userinfo']),
	  ...mapState('m_user', ['userId']),
	  ...mapState('m_dept', ['deptId']),
	  ...mapState('m_dept', ['dept'])
	},
	onShow(options) {
		this. clearFloor()
		this.getMailList();
	},
	
    onLoad() {
		
		this.getClassificationList();
    },
    methods: {
		//获取商品分类
      async getClassificationList() {
		 await uni.request({
			 url: uni.$http.baseUrl+'/api/mobileMall/getCategoryList',
			 data: {
				
				
			 },
			method: 'POST',
			 header: {
				   // "Content-Type": "application/json",
				   "Content-Type": "application/x-www-form-urlencoded"
				 },
			 success: (res) => {
				this.classificationList=res.data.data
			 },
			fail: (res) =>{
				if (res.statusCode !== 200) return uni.$showMsg()
			}
		 });
       
       },
	   clearFloor(){
	   	// 1. 重置关键数据
	   	this.queryFollowObj.pageNo = 1
	   	this.total = 0
	   	this.isloading = false
	   	this.goodsList = []
	   },
	 
	   //获取商品列表
	   async getMailList() {
		   // ** 打开节流阀
		   this.isloading = true
	   		 await uni.request({
	   			 url: uni.$http.baseUrl+'/api/mobileMall/getMallList',
	   			 data: {
					deptId: this.deptId,
	   				followId: this.userId,
	   				// 页码值
	   				pageNo: this.queryFollowObj.pageNo,
	   				// 每页显示多少条数据
	   				pageSize: this.queryFollowObj.pageSize,
	   			 },
	   			method: 'POST',
	   			 header: {
	   				   // "Content-Type": "application/json",
	   				   "Content-Type": "application/x-www-form-urlencoded"
	   				 },
	   			 success: (res) => {
					 // ** 关闭节流阀
					this.isloading = false
					this.mailNum=res.data.data
	   				this.goodsList=[...this.goodsList,...res.data.data]
	   			 },
	   			fail: (res) =>{
	   				if (res.statusCode !== 200) return uni.$showMsg()
	   			}
	   		 });
	    
	    },
     
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search_goods/search_goods?deptId='+ this.deptId
        })
      },
	  gotoRelease() {
	    uni.navigateTo({
	      url: '/subpkg/release_goods/release_goods'
	    })
	  }
    },
	
	// 触底的事件
	onReachBottom() {
		// 判断是否还有下一页数据
		if (this.queryFollowObj.pagenum * this.queryFollowObj.pageSize >= this.total ){
			return uni.$showMsg('数据加载完毕！')
		}
		
		// 判断是否正在请求其它数据，如果是，则不发起额外的请求
		if (this.isloading) {
			return
		}
		 // 让页码值自增 +1
		 this.queryFollowObj.pageNo += 1
		 // 重新获取列表数据
		 this.getMailList()
	},
	// 下拉刷新的事件
	onPullDownRefresh() {
		// 1. 重置关键数据
		this.clearFloor(),
		// 2. 重新发起请求
		this.getMailList(() => uni.stopPullDownRefresh())
	}
  }
</script>

<style lang="scss">
	page{
		background-color: white;
	}
	.search-release{
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
		.search{
			padding-top: 10px;
			width: 70%;
			height: 40px;
		}
		.release{
			margin-right: 10px;
			background-color: #f5f5f5;
			padding-top: 5px;
			padding-left:5px;
			padding-right:5px;
			border-radius: 8px;
		}
	}
	
	.scroll-view-container {
		/* background: #008000; */
		height: 70px;
		//background-color: white;
	}
 .scroll-view_H {
 	white-space: nowrap;
 	width: 100%;
	.scroll-view-item_H {
		margin: 10px;
		padding-left: 10px;
		display: inline-block;
		width: 120px;
		height: 100%;
		background-color: #efefef;
		border-radius: 8px;
		 transition: background-color 0.3s; /* 平滑过渡颜色 */
		.scroll-nav{
			display: flex;
			align-items: center;
			.img-view{
				margin-top: 5px;
				margin-bottom: 5px;
				margin-right: 5px;
				width: 35px;
				height: 35px;
				border-radius: 8px;
				display: flex;
				justify-content: center; /* 水平居中 */
				align-items: center; /* 垂直居中 */
				background-color: white;
				.scroll-image{
					width: 60%;
					height: 60%;
				}
			}
		
			.cal-text{
				font-size: 13px;
				font-weight: bold;
			}
			
		}
	}
	.scroll-view-item_H:hover {
		 background-color: #03758e; /* 鼠标悬停颜色 */
	}
 }
 .content{
	 padding: 5px;
 	//background-color: white;
	.goods-new{
		height: 20px;
		display: flex;
		justify-content: space-between; /* 靠两边*/
		.goods-text{
			font-weight: 700;
		}
	}
	.goods-list{
		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		.goods-item{
			background-color:  #f5f5f5;
		//	border: 5px solid #efefef; /* 灰色边框 */
			border-radius: 8px;
			margin: 8px;
			width: 45%;
			box-sizing: border-box;
			padding: 5px;
			.goods-img-left{
				
				
				.goods-image{
					border-radius: 8px;
					background-color:  white;
					width: 100%;
					height: 150px;
				}
				.name_price{
					font-weight: 600;
					border-radius: 8px;
					background-color:  white;
					padding: 5px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.name_price_left{
						width: 90%;
						.price,.name{
							margin: 2px;
						}
						.name{
							//width: 120px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					
				}
			}
		}
		
		
		
	}
 }
</style>
